<template>
    <div class="SHZY-common-layout">
        <div class="SHZY-common-layout-center">
            <el-row class="SHZY-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item>
                            <el-radio-group v-model="direction">
                                <el-radio label="right">回车右移</el-radio>
                                <el-radio label="down">回车下移</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="SHZY-common-layout-main SHZY-flex-main">

                <SHZY-table :data="list">
                    <el-table-column prop="A" label="A" show-overflow-tooltip min-width="200">
                        <template slot-scope="scope">
                            <el-input :id="'id_0' + scope.$index" @keyup.enter.native="handleEnter()"
                                @focus="handleFocus(0, scope.$index)" v-model="scope.row.A" placeholder="请输入" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="B" label="B" show-overflow-tooltip min-width="200">
                        <template slot-scope="scope">
                            <el-input :id="'id_1' + scope.$index" @keyup.enter.native="handleEnter()"
                                @focus="handleFocus(1, scope.$index)" v-model="scope.row.B" placeholder="请输入" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="C" label="C" show-overflow-tooltip min-width="200">
                        <template slot-scope="scope">
                            <el-input :id="'id_2' + scope.$index" @keyup.enter.native="handleEnter()"
                                @focus="handleFocus(2, scope.$index)" v-model="scope.row.C" placeholder="请输入" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="D" label="D" show-overflow-tooltip min-width="200">
                        <template slot-scope="scope">
                            <el-input :id="'id_3' + scope.$index" @keyup.enter.native="handleEnter()"
                                @focus="handleFocus(3, scope.$index)" v-model="scope.row.D" placeholder="请输入" />
                        </template>
                    </el-table-column>
                </SHZY-table>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'extend-keyDown',
    data() {
        return {
            query: { keyword: '', type: 1 },
            list: [
                { A: "", B: "", C: "", D: "" },
                { A: "", B: "", C: "", D: "" },
                { A: "", B: "", C: "", D: "" },
                { A: "", B: "", C: "", D: "" },
                { A: "", B: "", C: "", D: "" },
                { A: "", B: "", C: "", D: "" }
            ],
            currentCoordinate: [],
            direction:"right"
        }
    },
    mounted() {
        document.onkeydown = (e) => {
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
            if (e1 && e1.keyCode == 38) {
                let id = "id_" + this.currentCoordinate[0] + (this.currentCoordinate[1] - 1)
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }
            } else if (e1 && e1.keyCode == 40) {
                let id = "id_" + this.currentCoordinate[0] + (this.currentCoordinate[1] + 1)
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }

            } else if (e1 && e1.keyCode == 37) {
                let id = "id_" + (this.currentCoordinate[0] - 1) + this.currentCoordinate[1]
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }

            } else if (e1 && e1.keyCode == 39) {
                let id = "id_" + (this.currentCoordinate[0] + 1) + this.currentCoordinate[1]
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }

            }
        }
    },
    methods: {
        handleEnter() {
            if(this.direction=="right"){
                let id = "id_" + (this.currentCoordinate[0] + 1) + this.currentCoordinate[1]
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }
            }else{
                let id = "id_" + this.currentCoordinate[0] + (this.currentCoordinate[1] + 1)
                const obj = document.getElementById(id)
                if (obj) {
                    obj.focus()
                }
            }
        },
        handleFocus(x, y) {
            this.currentCoordinate = [x, y]
            console.log(x, y)
        },
        openFormDesign() {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.Form.init([], "", 1, 1, false)
            })
        },
        preview(id) {
            this.currId = id
            this.$nextTick(() => {
                this.previewDialogVisible = true
            })
        },
        openReleaseDialog(row) {
            this.currRow = row
            this.releaseDialogVisible = true
            this.releaseQuery = {
                pc: 1,
                app: 1,
                pcModuleParentId: '',
                appModuleParentId: '',
            }
            this.$nextTick(() => {
                this.$refs['releaseForm'].resetFields()
            })
            this.getMenuSelector()
            this.getAPPMenuSelector()
        },
        selectToggle(key) {
            this.releaseQuery[key] = this.releaseQuery[key] === 1 ? 0 : 1
        }
    }
}
</script>
<style lang="scss" scoped>
.release-dialog {
    >>>.el-dialog {
        .el-dialog__body {
            padding: 12px 55px;
        }
    }

    .dialog-form-main {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        >>>.el-form-item {
            width: 215px;
        }
    }

    .dialog-main {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .item {
            position: relative;
            width: 215px;
            height: 127px;
            cursor: pointer;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            text-align: center;
            padding-top: 20px;
            color: #606266;

            &.active {
                border-color: #1890ff;
                color: #1890ff;
                box-shadow: 0 0 6px rgba(6, 58, 108, 0.1);

                .item-icon {
                    border-color: #1890ff;
                }

                .icon-checked {
                    display: block;
                }
            }

            .item-icon {
                display: inline-block;
                width: 44px;
                height: 44px;
                margin-bottom: 16px;
                border: 2px solid #606266;
                line-height: 40px;
                font-size: 24px;
                text-align: center;
                border-radius: 50%;
            }

            .item-title {
                font-size: 16px;
                font-weight: 400;
            }

            .icon-checked {
                display: none;
                width: 18px;
                height: 18px;
                border: 18px solid #1890ff;
                border-left: 18px solid transparent;
                border-top: 18px solid transparent;
                border-bottom-right-radius: 4px;
                position: absolute;
                right: 0px;
                bottom: 0px;

                i {
                    font-size: 16px;
                    position: absolute;
                    top: 0;
                    left: -2px;
                    color: #fff;
                }
            }
        }
    }
}
</style>